import React, { Component } from 'react'
/* 
路由传参三种方式
1.state 隐式的传参方式 可以传递任意的数据类型
缺点:hash模式下 刷新页面state数据丢失
  this.props.history.push({
                pathname: '/details',
                state: {item}
              })
2.search url地址问号传参 刷新页面数据不丢失
缺点:只能传字符串类型 需要把字符串类型的值转义为对象类型
  this.props.history.push({
                pathname: '/details',
                search:`id=${item.id}&&title=${item.title}&&price=${item.price}&&img=${item.img}`
              })
3.动态路由传参:添加访问的条件,刷新页面数据不丢失
缺点:只能传字符串类型 不能传地址(图片,传递参数的个数必须和设置参数的个数一致 否则404)
 this.props.history.push(`/details/${item.id}/${item.title}`)
*/
export default class List extends Component {

  state = {
    datalist: [
      { id: 1, title: '西瓜1', price: 1.5, img: '/img/01.jpg' },
      { id: 2, title: '西瓜2', price: 1.6, img: '/img/02.jpg' },
      { id: 3, title: '西瓜3', price: 1.7, img: '/img/03.jpg' },
    ]
  }

  render() {
    let { datalist } = this.state
    return (
      <div>
        {
          datalist.map(item => {
            return <li key={item.id} onClick={() => {
              this.props.history.push(`/details/${item.id}`)
            }}>
              <img src={item.img} width={100} alt="" />
              <p>商品名称:{item.title}</p>
              <p>商品价格:{item.price}</p>
            </li>
          })
        }
      </div>
    )
  }
}
